<template>
    <el-dialog
        title="提示"
        width="30%"
        :visible="showDialog"
        @close="close">
        <el-form :model="formData" :rules="rules" ref="form" label-width="120px">
            <el-form-item prop="name" label="部门名称">
                <el-input v-model="formData.name" placeholder="2-10个字符" style="width: 80%" size="mini"/>
            </el-form-item>
            <el-form-item prop="code" label="部门编码">
                <el-input v-model="formData.code" placeholder="2-10个字符" style="width: 80%" size="mini"/>
            </el-form-item>
            <el-form-item prop="managerId" label="部门负责人">
                <el-select v-model="formData.managerId" placeholder="请选择负责人" style="width: 80%" size="mini">
                    <el-option
                        v-for="e in managerList"
                        :key="e.id"
                        :label="e.username"
                        :value="e.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="introduce" label="部门介绍">
                <el-input v-model="formData.introduce" placeholder="1-100个字符" type="textarea" size="mini" :rows="4"
                          style="width: 80%"/>
            </el-form-item>
            <el-form-item>
                <!-- 按钮 -->
                <el-row type="flex" justify="center">
                    <el-col :span="12">
                        <el-button size="mini" @click="submit" type="primary">确定</el-button>
                        <el-button size="mini" @click="close">取消</el-button>
                    </el-col>
                </el-row>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script>
import { addDepartment, getDepartment, getManager, getDeptItem, editDeptItem } from '@/api/department'

export default {
    name: 'DialogPage',
    props: {
        showDialog: true,
        pid: true,
        type: true
    },
    watch: {
        async showDialog(val) {
            if (val) {
                this.managerList = (await getManager()).data.data
                this.department = (await getDepartment()).data.data
                if (this.type === 'edit') {
                    const res = await getDeptItem(this.pid)
                    this.formData = JSON.parse(JSON.stringify(res.data.data))
                    this.backDisplay = JSON.parse(JSON.stringify(res.data.data))
                }
            }
        }
    },
    data () {
        return {
            formData: {},
            backDisplay: {},
            managerList: [],
            department: [],
            rules: {
                name: [
                    { required: true, message: '部门名称不能为空', trigger: 'blur' },
                    { min: 2, max: 10, message: '部门名称的长度为2-10个字符', trigger: 'blur' },
                    {
                        validator: async (rule, value, callback) => {
                            if (this.department.find(e => e.name === value) && this.backDisplay.name !== value) {
                                callback(new Error('部门名称重复'))
                            } else {
                                callback()
                            }
                        }, trigger: 'blur'
                    }
                ],
                code: [
                    { required: true, message: '部门编码不能为空', trigger: 'blur' },
                    { min: 2, max: 10, message: '部门编码的长度为2-10个字符', trigger: 'blur' },
                    {
                        validator: async (rule, value, callback) => {
                            if (this.department.find(e => e.code === value) && this.backDisplay.code !== value) {
                                callback(new Error('部门编码重复'))
                            } else {
                                callback()
                            }
                        }, trigger: 'blur'
                    }
                ],
                introduce: [
                    { required: true, message: '部门介绍不能为空', trigger: 'blur' },
                    { min: 1, max: 100, message: '部门介绍的长度为1-100个字符', trigger: 'blur' }
                ],
                managerId: [
                    { required: true, message: '部门负责人不能为空', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        close () {
            this.$emit('update:showDialog', false)
            this.$refs.form.resetFields();
        },
        submit() {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    if (this.type === 'add') {
                        this.formData.pid = this.pid
                        await addDepartment(this.formData)
                        this.close()
                    } else if (this.type === 'edit') {
                        await editDeptItem(this.pid, this.formData)
                        this.close()
                    }
                } else {
                    return false;
                }
            });
        }
    }
}
</script>

<style scoped lang="scss">
</style>
